<template>
  <div>
    <div class="top" style="display:flex;margin-bottom:10px">
      <div class="kanban-wrapper">
        <div class="kanban-card">
          <div>
            <span class="card-title title-blue">产能</span>
          </div>
          <div class="card-top" style="padding:0 6px">
            <div style="display:flex;text-align:left;justify-content:space-around">
              <div class="card-top-middle">
                <p class="top-text-one">上线故事量(人月)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">610.93</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">大中上线故事量(人月)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">19.93</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">小微上线故事量(人月)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">19.93</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">人均任务产出(人天)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">0</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">故事平均规模(人天/个)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">26.64</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="kanban-card">
          <div>
            <span class="card-title title-green">响应</span>
          </div>
          <div class="card-top" style="padding:0 6px">
            <div style="display:flex;text-align:left;justify-content:space-around">
              <div class="card-top-middle">
                <p class="top-text-one">小微故事响应周期P80(天)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">58</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">小微故事实施周期(人天)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">39</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">小微故事上线延期率(%)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">5.56</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="kanban-card">
          <div>
            <span class="card-title title-orange">质量</span>
          </div>
          <div class="card-top" style="padding:0 6px">
            <div style="display:flex;text-align:left;justify-content:space-around">
              <div class="card-top-middle">
                <p class="top-text-one">研发生产缺陷密度(人天)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">7.86</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">生产缺陷逃逸率(%)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">2.8</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">人均生产缺陷数(人天)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">0.02</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="kanban-card">
          <div>
            <span class="card-title title-red">其他</span>
          </div>
          <div class="card-top" style="padding:0 6px">
            <div style="display:flex;text-align:left;justify-content:space-around">
              <div class="card-top-middle">
                <p class="top-text-one">故事投入产出比(人天)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">1：0.96</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">开发任务产出占比(人天)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">0</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
              <div class="card-top-middle">
                <p class="top-text-one">人均上线故事量(人天)</p>
                <p class="center-text" style="margin:0">
                  <span class="special-text" style="font-size:25px">4.45</span>
                </p>
                <div class="bottom-text" style="margin-top:11px">
                  <span class="details-text">
                    <div style="margin-bottom:9px">
                      <span>同比</span>
                      <span style="margin-left:2px">100</span>%
                      <span class="el-icon-caret-top"></span>
                      <span style="margin-left:4px">环比</span>
                      <span style="margin-left:4px">0</span>%
                      <span class="el-icon-caret-bottom"></span>
                      <!-- <span :class="capacityVo.momtakprdc>=0?'el-icon-caret-top':'el-icon-caret-bottom'"></span> -->
                    </div>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="departmentRank">
        <queryDragonTigerRank :pageType="'manger'"></queryDragonTigerRank>
      </div>
    </div>
  </div>
</template>
<script>
import queryDragonTigerRank from "./queryDragonTigerRank.vue";
export default {
  name: "IntegratedKanban",
  components: {
    queryDragonTigerRank,
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>